<template>
  <div class="iconCard">
    <div class="header">
      <div class="headerR">
        <!-- <div class="icon triangle"></div> -->
        <div class="title">
          <span>{{title}}</span>
          <span class="subTitle" v-if="subTitle">{{subTitle}}</span>
        </div>
      </div>
    </div>
    <el-row class="cardContent" :gutter="20">
      <draggable element="div" class="list" :list="listData">
        <transition-group type="transition" :name="'flip-list'">
          <el-col v-for="item in listData" :key="item.menuId" :style="cItemStyle" class="item">
            <div class="content" :class="{active:item.active}">
              <i
                class="iconfont icon-position"
                :class="[cIconCls]"
                v-if="isShowIcon&&cIconCls && cIconCls.length>0"
                :style="cIconStyle"
                @click="$emit('iconClickFun',item, type)"
              ></i>
              <div class="img">
                <img src="@/assets/img/menu_icon.png" />
              </div>
              <div class="itemText">{{item.name}}</div>
            </div>
          </el-col>
        </transition-group>
      </draggable>
    </el-row>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "iconCard",
  props: {
    title: {
      type: String,
      default: ""
    },
    subTitle: {
      type: String,
      default: ""
    },
    listData: {
      type: Array,
      default: () => []
    },
    iconCls: {
      type: Object,
      default: () => ({})
    },
    isShowIcon: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: ""
    }
  },
  components: {
    draggable
  },
  computed: {
    cItemStyle () {
      return {
        width: (100 / 8) + "%"
      };
    },
    cIconCls () {
      return Object.keys(this.iconCls).length > 0 ? this.iconCls.iconName : "";
    },
    cIconStyle () {
      return Object.keys(this.iconCls).length > 0 ? { color: this.iconCls.style.color } : {};
    }
  },
  methods: {
    handClickContent (item) {
      console.log(item);
    }
  },
  data () {
    return {

    };
  }
};
</script>

<style lang="less" scoped>
.flip-list-move {
  transition: transform 0.5s;
}
.iconCard {
  background: #ffffff;
  position: relative;
  // min-height: 200px;
  .triangle {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    .borderColor(border-left-color);
    top: 1px;
  }
  .header {
    height: 40px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    // border-bottom: 1px solid #ebe9f3;
    margin: 0 10px;
    .headerR {
      display: flex;
      position: relative;
      .title {
        .color();
        position: relative;
        left: 10px;
        font-weight: bold;
        .subTitle {
          color: #666;
        }
      }
    }
    .headerL {
      cursor: pointer;
    }
    .icon {
      position: absolute;
      left: 5px;
    }
  }
  .cardContent {
    // padding: 10px;
    height: calc(100% - 40px);
    .list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      > span {
        display: inline-block;
        width: 100%;
      }
      .item {
        margin-bottom: 10px;
        overflow: hidden;
        cursor: pointer;
        position: relative;

        .content {
          border: 1px solid #ebe9f3;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 10px 0;
          position: relative;
          .img {
            margin-bottom: 10px;
          }
          .icon-position {
            position: absolute;
            right: 5px;
            top: 5px;
            // border: 1px solid #ebe9f3;
            border-radius: 50%;
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
